﻿@using VocaDb.Web.Helpers
@using SharedRes = ViewRes.SharedStrings;

<div data-bind="visible: showArtistSearch, with: artistSearchViewModel">

	@{ Html.RenderPartial("Partials/_EntryCountBox"); }


	<div data-bind="with: paging">
		@KnockoutHelpers.ServerSidePaging()
	</div>

	<table class="table table-striped" data-bind="css: { loading: loading }">
		<thead>
			<tr>
				<th colspan="2">
					<a data-bind="click: function() { sort('Name') }" href="#">
						@ViewRes.SharedStrings.ArtistName
						<span class="sortDirection_down" data-bind="visible: sort() == 'Name'"></span>
					</a>
				</th>
				<th>@ViewRes.Search.IndexStrings.ArtistType</th>
				<th></th>
				<th data-bind="if: $parent.showTags">
					@SharedRes.Tags
				</th>
			</tr>
		</thead>
		<tbody data-bind="foreach: page">
			<tr>
				<td style="width: 80px">
					<a data-bind="visible: $data.mainPicture && mainPicture.urlTinyThumb, attr: { href: vdb.utils.EntryUrlMapper.details('Artist', id), title: $data.additionalNames }" href="#" class="coverPicThumb">
						<img data-bind="attr: { src: ($data.mainPicture ? mainPicture.urlTinyThumb : '') }" title="Cover picture" class="coverPicThumb img-rounded" />
					</a>
				</td>
				<td>
					<a data-bind="text: name, attr: { href: vdb.utils.EntryUrlMapper.details('Artist', id) }" href="#"></a>
					&nbsp;
					<span data-bind="artistTypeLabel: artistType"></span>
					@KnockoutHelpers.DraftIcon("status")
					<br />
					<small class="extraInfo" data-bind="text: $data.additionalNames"></small>
				</td>
				<td>
					<span data-bind="text: $parent.artistTypeName($data)"></span>
				</td>
				<td>
					<span data-bind="visible: $data.releaseDate">
						@ViewRes.Search.IndexStrings.VoicebankReleaseDate <span data-bind="text: $parent.formatDate($data.releaseDate)"></span>
					</span>
				</td>
				<td data-bind="if: $parents[1].showTags() && $data.tags" class="search-tags-column">
					<div data-bind="visible: tags.length">
						<i class="icon icon-tags"></i>
						<!-- ko foreach: tags -->
						<a href="#" data-bind="text: tag.name, click: function() { $parents[1].selectTag(tag); return false; }"></a><span data-bind="visible: $data != _.last($parent.tags)">,</span>
						<!-- /ko -->
					</div>
				</td>
			</tr>
		</tbody>
	</table>

	<div data-bind="with: paging">
		@KnockoutHelpers.ServerSidePaging()
	</div>

</div>

